<template>
  <div>
    <el-button type="primary" size="mini" class="add" @click="handleAddClick()">添加品类</el-button>
    <category-add-dialog :dialogAddVisible="dialogAddVisible"
                       :dialogInfo="dialogInfo"
                       @search="search"
                       @selection-change="handleSelectionChange"
                       @update:dialogAddVisible="dialogVisibles">

    </category-add-dialog>

    <category-see-dialog :dialogSeeVisible="dialogSeeVisible"
                       :dialogInfo="dialogInfo"
                       :fileList="fileList"
                       @search="search"
                       @selection-change="handleSelectionChange"
                       @update:dialogSeeVisible="dialogSeeVisibles">

    </category-see-dialog>
    <el-button type="danger" size="mini" class="add" @click="handleRemoveClick()">删除品类</el-button>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow" >确 定</el-button>
            </span>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection">
      </el-table-column>
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="品类名称">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="权重">
      </el-table-column>
      <el-table-column
        label="更新日期">
        <template slot-scope="scope">{{dateFormat(scope.row.updateTime)}}</template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <i class="el-icon-top" @click="handleMoveSort(scope.row.id,'up')"></i>
            <i class="el-icon-bottom" @click="handleMoveSort(scope.row.id,'down')"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchData.page"
        :page-sizes="[5,10, 20, 50]"
        :page-size="searchData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { pageRequest  ,remove ,moveSort } from '@/api/category'
  import { getUrl } from  '@/api/file'
  import CategoryAddDialog from "./components/CategoryAddDialog"; //引入组件
  import CategorySeeDialog from "./components/CategorySeeDialog"; //引入组件
  import { dateFormat } from '@/utils/dateUtils'
  export default {
    name: "SellerManage",
    components: {
      CategoryAddDialog,
      CategorySeeDialog
    },
    data() {
      return {
        //控制弹窗 显示
        dialogSeeVisible: false,
        delVisible: false,
        dialogAddVisible: false,
        //点击查看按钮  这条数据详细信息
        dialogInfo:{},
        fileList:[],
        totalCount:0,
        tableData: [],
        multipleSelection: [],
        multipleSelectionIds:[],
        searchData:{
          page: 1,
          size: 5,
        }
      }
    },
    mounted() {
      this.search();
    },
    methods: {
      dateFormat(date){
        return  dateFormat(date);
      },
      //点击查看 按钮  的事件
      handleAddClick() {
        this.dialogAddVisible = true;

      },
      handleRemoveClick(){
        if (this.multipleSelection.length===0){
          this.$message.warning("请选择至少一条记录");
        }else{
          this.delVisible = true;
        }
      },
      deleteRow(){
        remove(this.multipleSelectionIds).then((response) => {
          this.delVisible = false;
          this.$message.success("删除成功");
          this.search()
        }).catch((response) => {
          console.log(response);
        })
      },
      changeStatus(data){
        if (data.disabledFlag===1){
          data.disabledFlag=0
        }else{
          data.disabledFlag=1
        }
        disable(data).then((response) => {
          this.search()
        }).catch((response) => {
          console.log(response);
        })
      },
      //点击查看 按钮  的事件
      handleClick(info) {
        this.dialogSeeVisible = true;
        this.dialogInfo = info;
        getUrl(info.iconUrl).then((response) => {
          this.dialogInfo.imgUrl = response.data;
          if (response.data !==null&&response.data.length!==0){
            this.fileList=[{name: this.dialogInfo.name,url: response.data}];
          }else{
            this.fileList=[];
          }
        }).catch((response) => {

        })
      },
      handleMoveSort(id,action){
        moveSort({id,action}).then(() => {
            this.search();
        }).catch((response) => {
          console.log(response);
        })
      },
      //子组件传 过来的 数据
      dialogVisibles(v){
        this.dialogAddVisible = v
      },
      dialogSeeVisibles(v){
        this.dialogSeeVisible = v
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.multipleSelectionIds = [];
        this.multipleSelection.forEach(selection=>{
          this.multipleSelectionIds.push(selection.id);
        })
      },
      handleSizeChange(val) {
        this.search();
        this.searchData.size= val;
      },
      handleCurrentChange(val) {
        this.search();
        this.searchData.page= val;
      },
      search(){
        pageRequest(this.searchData).then((response) => {
          this.tableData = response.data.pageList;
          // this.tableData.forEach(data=>{
          //     if (data.img !=null && data.img !== ""){
          //       data.img = getUrl(data.img);
          //     }
          //
          // })
          this.totalCount = response.data.totalCount;
        }).catch((response) => {
          console.log(response);
        })
      }
    }
  }
</script>

<style scoped>
  .add{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
</style>
